<template>
  
    <div style="background-color: #FBFBEA;border-radius: 5px;">
      <div  style="padding-left: 20px;display: inline-block;margin-top: 20px;font-weight: bold;font-size: 20px;">个人信息</div>
      <el-form class="usernew" :model="userform" label-width="100px">
        <el-form-item label="账户名">
          <el-input  v-model="userform.name" autocomplete="off"></el-input>
        </el-form-item>
  
        <el-form-item label="昵称">
          <el-input v-model="userform.pet" autocomplete="off"></el-input>
        </el-form-item>
  
        <el-form-item label="头像" >
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            action="http://47.99.51.143:9000/files/upload"
            
            :on-success="successUserUpload"
            style="float: left; margin-left: 20px"
          >
          <img v-if="userform.image" :src="'http://47.99.51.143:9000/files/' + userform.image" class="avatar">
  
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           
  
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
  
        <el-form-item label="性别">
          <el-select v-model="userform.gender" placeholder="请选择">
            <el-option
              v-for="item in genderList"
              :key="item.value"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item label="手机号">
          <el-input v-model="userform.phone" autocomplete="off"></el-input>
        </el-form-item>
  
        <el-form-item label="邮箱">
          <el-input v-model="userform.email" autocomplete="off"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary"  @click="userSubmit()" style="margin-bottom: 20px;">保存修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  
  
  <script>
  import request from '@/request/request.js';
  import { EventBus } from '@/main.js';

  export default {
    data() {
      return {
        userFormVisible: true,
        genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        userform: {}
      }
    },
    methods: {
      successUserUpload(res, file) {
        console.log(res);
        console.log(file);
        this.userform.image = res.data;
        this.user.image = res.data;
        localStorage.setItem("user", JSON.stringify(this.user));
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
      userEdit() {
        request.get("/user/" + this.user.id).then((res) => {
          if (res.code === "0") {
            this.userform = res.data;
            this.user = res.data;
            localStorage.setItem("user", JSON.stringify(res.data));

          }
        })
      },
      userSubmit() {
        this.$confirm('你确定要修改个人信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request.post("/user", this.userform).then((res) => {
            if (res.code === "0") {
              this.$message.success({ message: "修改成功", type: "success" });
              //更新本地缓存
              /* localStorage.setItem("user", JSON.stringify(res.data)); */
              this.userEdit();
              /*  this.user = {...this.user, ...res.data};
                 localStorage.setItem("user", JSON.stringify(this.user)); */
              EventBus.$emit('reloadSide');
            } else {
              this.$message({ message: "修改失败", type: "error" });
            }
          });

        }).catch(() => {
          this.$message({ message: '已取消', type: 'info' });

        });
      },
    },
    created() {
      this.userEdit();
    },
  }
</script>
  
  
  
  <style scoped>
  div /deep/ .el-input__inner {
    background-color: rgb(184, 225, 144);
    color: #000;
    font-size: 16px;
    font-weight: normal;
  }

</style>
  
  
  
  
  
  
  
  
  
  
  